<script setup lang="ts">
  import { ref, watch, defineEmits } from 'vue';
  import TopInput from './components/top-input.vue';
  import TopTable from './components/top-table.vue';
  import AddForm from './components/add-form.vue';

  const emit = defineEmits(['updateTableData']);
  const tableData = ref('');

  const locationTypeOptions = [
    {
      label: '大件货架区',
      value: 6,
    },
    {
      label: '大件地堆区',
      value: 12,
    },
  ];

  watch(
    tableData,
    () => {
      emit('updateTableData', tableData.value);
    },
    { deep: true }
  );
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">大件库位管理</div>
      </template>
      <div class="content">
        <TopInput @updateArray="tableData = $event" :locationTypeOptions="locationTypeOptions" />
        <a-divider />
        <TopTable :table-data="tableData" :locationTypeOptions="locationTypeOptions" />
      </div>
      <AddForm :locationTypeOptions="locationTypeOptions" />
    </a-card>
  </div>
</template>

<style scoped>
  .flow-query {
    margin: 0px;
    padding: 10px;
    height: 100%;
  }
  .card-title {
    font-size: 24px;
  }
  .content {
    display: flex;
    flex-direction: column;
  }
</style>
